import React, { Component } from 'react'
import { connect } from 'react-redux'
import { get } from 'utils/http'
import { GenralListContainer } from './../searchPage.style'

@connect(
    state => {
        console.log()
        return ({
            keyword: state.getIn(['search', 'key'])
        })
    },
    null
)

export default class List1 extends Component {
    state = {
        genralList: []
    }
    componentDidMount() {
        this.keyword = localStorage.getItem('keywords')
        this.getGenralList()
    }

    async getGenralList() {
        let general = await get({
            url: `http://h5test.wfdata.club/v1/search/all?keyword=${this.keyword}`,
            headers: {
                'X-Request-Id': 'dgmxgkvRVZg+WaDX0YdMU6N6CO/H3U7PGly02rBHH2ZU6pldHMBk//l5L1Q+RDqF9MYuLFXxaPic0W60EC8gaA==',
                'X-Running-Env': 'Q3OVXEArMgZNlMHtAxpu7ONj6bFtJQXn/rvs04BOX697Tr585tFrKIfZg2KoeUpgvnQYU5SNJ6oll+TA3FcxhCSpa6SvJgmuq4xYqBNA20NJ8ldwleqG5XO+/pJxDWDxaNNMPz7ogAvZMCU05jjILfwfb4xVDID+l4bJCv3PvZscJDIQEUoUSJwLTyrr7tv+gqSf9UY9s9WYRpJ1JOgOJVE/R7GAEfmgKwxF17NRO5ggEi+HSU8VLk4VqV/x4hOj'
            }
        })
        let allgenral = general
        general = general.data.dataList.threadList

        this.setState({
            genralList: general,
            all: allgenral
        })

        console.log(this.state.all)

    }
    liClickHandler = id => {
        this.props.history.push(`/detail/${id}`)
    }

    render() {
        return (
            <GenralListContainer>
                {this.state.all && this.state.all.data.pageInfo && <div className="result">
                    <p>已为您找到 <span>{this.state.all.data.dataList.topicList.length}</span> 个相关结果</p>
                </div>}
                {this.state.all && this.state.all.data.dataList.topicList[0] &&
                    <div >
                        <div style={
                            {
                                display: "flex",
                                flexDirection: 'column',
                                width: '100%',
                                border: '0 !important'
                            }
                        }>
                            {
                                this.state.all.data.dataList.topicList.map(item => {
                                    return (
                                        <div
                                            className="board"
                                            key={
                                                item.topicId
                                            }>
                                            <div className="icon">
                                                <img src={item.topicIcon} alt="" />
                                            </div>
                                            <div className="content">
                                                <h1>{item.topicName}</h1>
                                                <h6>{item.threadCount}帖子</h6>
                                            </div>
                                            <div className="more">
                                                <div>
                                                    <i>+</i>&nbsp;关注
                                                </div>
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>}

            </GenralListContainer>
        )
    }
}
